<template>
    <div class="register">
      <div class="main">
        <div class="main-title">Forget The Password </div>
        <div class="main-text"></div>

        <div class="main-block">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item label="Email address" prop="account">
              <el-input
                v-model="ruleForm.account"
                clearable
              ></el-input>
            </el-form-item>


            <el-form-item label="content" prop="content">
              <el-input
                  v-model="ruleForm.content"
                  type="textarea"
                  clearable
                  :rows="5"
              ></el-input>
            </el-form-item>

            <div
              class="block-button"
              :style="{ background: ruleForm.account == '' ? '#e4e7f1' : '#0060df' }"
              @click="LoginStop('ruleForm')"
            >
            Send
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>

    <script>
  import { postUserLogin } from "../../api/index";
  import { md5 } from "../../utils/md5";
  import { codeVerification, emailVerification } from "../../utils/verify";
  export default {
    data() {
      return {
        ruleForm: {
          account: "",
        },
        rules: {
          account: [
            { required: true, message: "you@example.com", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      LoginStop(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!emailVerification(this.ruleForm.account) == true) {
              this.$message.warning("you@example.com");
              return;
            }

            let params = {
              code: "",
              loginType: 1, // 	登录类型 0验证码登录 1密码登录
              password: md5(this.ruleForm.password),
              mail: this.ruleForm.account,
            };

            postUserLogin(params).then((res) => {
              if (res.success == true) {
                localStorage.setItem("token", res.result.token);
                localStorage.setItem("info", JSON.stringify(res.result.userInfo));

                this.$router.push({
                  path: "/main/index",
                });
              }
            });
          } else {
            return false;
          }
        });
      },
    },
  };
  </script>

    <style lang="less" scoped>
  .register {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .main {
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 20px 30px;
      box-sizing: border-box;

      .main-title {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .main-text {
        font-size: 20px;
        color: #bbbdc2;
        letter-spacing: 0.5px;
      }

      .main-block {
        margin-top: 50px;

        /deep/ .el-form-item__label {
          line-height: 30px;
          font-size: 17px;
          color: #8d9099;
          font-weight: 500;
        }

        .block-button {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          border-radius: 5px;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }

        .block-text {
          width: 400px;
          text-align: center;
          margin-top: 10px;
          font-size: 16px;
          line-height: 25px;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }
  </style>
